<template>
  <el-dialog
    :visible.sync="$attrs.visable"
    width="600px"
    :before-close="handleClose"
    append-to-body
    title="添加到素材库"
    :close-on-click-modal="false"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="素材标题：" prop="title">
        <el-input v-model="form.title" placeholder="素材标题"></el-input>
      </el-form-item>
      <el-form-item label="素材标签：" prop="name">
        <el-input
          v-model="form.name"
          @keyup.enter.native="handleAddLable"
          placeholder="新建或搜索标签，回车键确认"
        ></el-input>
        <div v-if="form.labels.length" class="labelbox mt-15">
          <div
            class="labelitem c_text ml-5 mb-5"
            v-for="(item, index) in form.labels"
            :key="index"
          >
            {{ item }}
            <i
              class="el-icon-close ml-10 commhover"
              @click="removeLable(index)"
            ></i>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "",
        name:'',
        labels:[],
      },
      rules:{
        title:[{ required: true, message: '请输入素材标题', trigger: 'blur' }],
      },
    };
  },
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    handleAddLable() {
      if (this.form.name) {
        if (this.form.labels.includes(this.form.name)) {
          this.$message.warning("标签重复");
          return;
        }
        this.form.labels.push(this.form.name);
        this.form.name = "";
      }
    },

    removeLable(index) {
      this.form.labels.splice(index, 1);
    },

    handleSubmit(){},
  },
};
</script>
<style lang="scss" scoped>
.labelbox {
  border: 1px solid rgb(240, 240, 240);
  padding: 8px;
}
.labelitem {
  display: inline-block;
  border: 1px solid #d9d9d9;
  background-color: #f5f5f5;
  padding: 4px 13px;
  line-height: 22px;
}
</style>